<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <f:view>
    <h:head>
        <title>Juego del Ahorcado</title>
        <script type="text/javascript">
	        function reviewStatus(){
	        	var finished = document.getElementById("categoryForm:finished").value;
	        	alert(finished);
	        }
		</script>
        <f:event type="preRenderView" listener="#{hangmanBackingBean.cleanValues}" />               
    </h:head>
    <h:body onload="reviewStatus()">
        <h:form id="categoryForm">
        	<h:inputHidden id="finished" value="#{hangmanBackingBean.win}"></h:inputHidden>
        	<h:panelGrid columns="3">
        		<h:outputText value="Categoria" style="font-family: Verdana;" />
        		<h:selectOneMenu id="cat" value="#{hangmanBackingBean.catId}" style="font-family: Verdana; font-size: 12px; width: 150px;">
        			<f:selectItem itemValue="-1" itemLabel="Seleccionar"/>
        			<f:selectItem itemValue="1" itemLabel="Animal"/>
        			<f:selectItem itemValue="2" itemLabel="Cosa"/>
        			<f:selectItem itemValue="3" itemLabel="Nombre"/>
        		</h:selectOneMenu>        	
        		<h:commandButton value="Nuevo" action="#{hangmanBackingBean.selectCategory }" />        		        		
        	</h:panelGrid>
        	<h:messages globalOnly="true"/>
        </h:form>	
        <h:form id="hangmanForm">
        	<h:panelGroup id="gameId" rendered="#{hangmanBackingBean.renderGame}">        		
        		<h:panelGrid columns="2">
        			<h:outputText value="Palabra:" style="font-family: Verdana;" />
        			<h:outputText value="#{hangmanBackingBean.wordGuess}" style="font-family: Verdana;" />
        			<h:outputText value="Usadas:" style="font-family: Verdana;" />
        			<h:outputText value="#{hangmanBackingBean.wordErrors }" style="font-family: Verdana;" />
        			<h:outputText value="Letra:" style="font-family: Verdana;" rendered="#{hangmanBackingBean.followPlay}" />
        			<h:panelGroup rendered="#{hangmanBackingBean.followPlay}">
        				<h:inputText id="word" maxlength="1" value="#{hangmanBackingBean.word}" style="width: 20px;" validator="#{hangmanBackingBean.validateWord}" autocomplete="off" required="true" onfocus="this.select();" requiredMessage="Ingrese una letra.">        					        					        					        					        					
        				</h:inputText> &nbsp;       				        				
        				<h:commandButton value="Probar" action="#{hangmanBackingBean.testGame}" style="font-family: Verdana;" /> <br />        				       				        			
        			</h:panelGroup>        				
        			<f:facet name="footer">
        				<h:message id="wordMessage" for="word" style="color:red;font-family: Verdana;" /> 
        			</f:facet>
        		</h:panelGrid>
        		<h:graphicImage value="image.jsp" />
        	</h:panelGroup>
        </h:form>
    </h:body>
    </f:view>
</html>